<template>
  <div>
    <canvas id="canvas" width="640" height="480"> </canvas>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import { myBox2D } from "./chapter3/mybox2d"
export default defineComponent({
  name: "",
  setup() {
    let canvas:HTMLCanvasElement
    let ctx:CanvasRenderingContext2D
    let mybox2d:myBox2D

    onMounted(() => {
      canvas = document.getElementById("canvas")
      ctx = canvas.getContext('2d')

      let option = {
        canvas:canvas,
        ctx:ctx
      }
      mybox2d = new myBox2D(option)
      mybox2d.init()
    });

    return {};
  },
});
</script>

<style scoped>
#canvas {
  border: 1px solid #000;
}
</style>
